<clr-modal [(clrModalOpen)]="opened" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_ENABLE'|translate}}{{"APP_TOOLS"|translate}}</h3>
    <div class="modal-body modal-height">
        <form clrForm #itemForm='ngForm'>
            <div *ngIf="item.name === 'chartmuseum'">
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                        <input type="checkbox" clrToggle name="pv" [(ngModel)]="item.vars['persistence.enabled']"/>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc" [(ngModel)]="item.vars['persistence.storageClass']" required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input type="number" size="34" clrInput name="size"
                           [(ngModel)]="item.vars['persistence.size']"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_NODE"|translate}}</label>
                    <select clrSelect class="clr-select" name="node"
                            [(ngModel)]="item.vars['nodeSelector.kubernetes\\.io/hostname']">
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let item of nodeList" [value]="item">{{item}}</option>
                    </select>
                    <clr-control-helper>{{"APP_FILL_RULE"|translate}}</clr-control-helper>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'prometheus'">
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container>
                    <label>{{"APP_DATA"|translate}}{{"APP_RETENTION"|translate}}（{{"APP_DAY"|translate}}）</label>
                    <input clrInput name="retention" type="number"
                           [(ngModel)]="item.vars['server.retention']" size="34"/>
                </clr-input-container>
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['server.persistentVolume.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-select-container *ngIf="item.vars['server.persistentVolume.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc" [(ngModel)]="item.vars['server.persistentVolume.storageClass']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['server.persistentVolume.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input clrInput name="size"
                           [(ngModel)]="item.vars['server.persistentVolume.size']" type="number" size="34"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['server.persistentVolume.enabled']">
                    <label>{{"APP_NODE"|translate}}</label>
                    <select clrSelect class="clr-select" name="node"
                            [(ngModel)]="item.vars['server.nodeSelector.kubernetes\\.io/hostname']">
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let item of nodeList" [value]="item">{{item}}</option>
                    </select>
                    <clr-control-helper>{{"APP_FILL_RULE"|translate}}</clr-control-helper>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'logging'">
                <app-modal-alert></app-modal-alert>
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container>
                    <label>{{"APP_PREFIX"|translate}}{{"APP_INDEX"|translate}}</label>
                    <input clrInput name="prefixIndex" pattern="{{esIndexPattern}}"
                           [(ngModel)]="item.vars['fluentd-elasticsearch.elasticsearch.logstashPrefix']" size="34"
                           (blur)="checkIsCorrect()" required/>
                    <clr-control-helper>{{'APP_EFK_PREFIX_INDEX_HELPER'|translate}}</clr-control-helper>
                    <clr-control-error>{{esIndexPatternHelper}}</clr-control-error>
                </clr-input-container>
                <clr-input-container>
                    <label>{{"APP_REPLICAS"|translate}}{{"APP_COUNT"|translate}}</label>
                    <input clrInput oninput="if(value<1)value=1" min="1" type="number" name="replicasNum"
                           [(ngModel)]="item.vars['elasticsearch.replicas']" (blur)="checkIsCorrect()" required>
                    <clr-control-helper>{{'APP_EFK_REPLICAS_HELPER'|translate}}{{nodeNum}}</clr-control-helper>
                </clr-input-container>
                <clr-input-container>
                    <label>{{"APP_HEAP_MEMORY"|translate}}</label>
                    <input clrInput oninput="if(value<1)value=1" min="1" type="number" name="heapMemory"
                           [(ngModel)]="item.vars['elasticsearch.esJavaOpts.item']" required>
                    <clr-control-helper>{{'APP_HEAP_MEMORY_HELPER'|translate}}</clr-control-helper>
                </clr-input-container>
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['elasticsearch.persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-select-container *ngIf="item.vars['elasticsearch.persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc"
                            [(ngModel)]="item.vars['elasticsearch.volumeClaimTemplate.storageClassName']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['elasticsearch.persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input clrInput name="size"
                           [(ngModel)]="item.vars['elasticsearch.volumeClaimTemplate.resources.requests.storage']"
                           type="number"
                           size="34"/>
                </clr-input-container>
            </div>

            <div *ngIf="item.name === 'dashboard'">
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'grafana'">
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>

                <clr-input-container>
                    <label>{{"APP_PASSWORD"|translate}}</label>
                    <input style="display:none">
                    <input clrInput type="password" [size]="32" name="password" id="password"
                           [(ngModel)]="item.vars['adminPassword']"
                           (blur)="handleValidation('password')"
                           pattern="{{passwordPattern}}"
                           required/>
                    <clr-control-error *ngIf="!getValidationState('password')">
                        {{'APP_PASSWORD_ERROR_MSG'|translate}}
                    </clr-control-error>
                    <clr-control-error *ngIf="!getValidationState('rePwdCheck')">
                        {{'APP_PASSWORD_HELP_MSG'|translate}}
                    </clr-control-error>
                </clr-input-container>
                <clr-input-container>
                    <label>{{"APP_CONFIRM_PASSWORD"|translate}}</label>
                    <input style="display:none">
                    <input clrInput type="password" [size]="32" name="rePassword"
                           [(ngModel)]="item.vars['adminPasswordRe']"
                           (blur)="handleValidation('rePassword')"
                           pattern="{{passwordPattern}}" required/>
                    <clr-control-error *ngIf="!getValidationState('rePwdCheck')">
                        {{'APP_PASSWORD_HELP_MSG'|translate}}
                    </clr-control-error>
                    <clr-control-error *ngIf="!getValidationState('rePassword')">
                        {{'APP_PASSWORD_ERROR_MSG'|translate}}
                    </clr-control-error>
                </clr-input-container>

                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv" [(ngModel)]="item.vars['persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>

                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc" [(ngModel)]="item.vars['persistence.storageClassName']" required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input type="number" size="34" clrInput name="size" [(ngModel)]="item.vars['persistence.size']"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_NODE"|translate}}</label>
                    <select clrSelect class="clr-select" name="node"
                            [(ngModel)]="item.vars['nodeSelector.kubernetes\\.io/hostname']">
                            <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let item of nodeList" [value]="item">{{item}}</option>
                    </select>
                    <clr-control-helper>{{"APP_FILL_RULE"|translate}}</clr-control-helper>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'loki'">
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['loki.persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>

                <clr-select-container *ngIf="item.vars['loki.persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc"
                            [(ngModel)]="item.vars['loki.persistence.storageClassName']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['loki.persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input type="number" size="34" clrInput name="size"
                           [(ngModel)]="item.vars['loki.persistence.size']"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['loki.persistence.enabled']">
                    <label>{{"APP_NODE"|translate}}</label>
                    <select clrSelect class="clr-select" name="node"
                            [(ngModel)]="item.vars['loki.nodeSelector.kubernetes\\.io/hostname']">
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let item of nodeList" [value]="item">{{item}}</option>
                    </select>
                    <clr-control-helper>{{"APP_FILL_RULE"|translate}}</clr-control-helper>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'registry'">
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>

                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc"
                            [(ngModel)]="item.vars['persistence.storageClass']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input type="number" size="34" clrInput name="size"
                           [(ngModel)]="item.vars['persistence.size']"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['persistence.enabled']">
                    <label>{{"APP_NODE"|translate}}</label>
                    <select clrSelect class="clr-select" name="node"
                            [(ngModel)]="item.vars['nodeSelector.kubernetes\\.io/hostname']">
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let item of nodeList" [value]="item">{{item}}</option>
                    </select>
                    <clr-control-helper>{{"APP_FILL_RULE"|translate}}</clr-control-helper>
                </clr-select-container>
            </div>

            <div *ngIf="item.name === 'kubeapps'">
                <clr-select-container>
                    <label>{{"APP_NAMESPACE"|translate}}</label>
                    <select clrSelect class="clr-select" name="namespace" [(ngModel)]="item.vars['namespace']" required>
                        <option *ngFor="let ns of namespaceList" [value]="ns">{{ns}}</option>
                    </select>
                </clr-select-container>
                <clr-toggle-container>
                    <clr-toggle-wrapper>
                        <input type="checkbox" clrToggle name="pv"
                               [(ngModel)]="item.vars['postgresql.persistence.enabled']"/>
                        <label>{{"APP_ENABLE"|translate}}{{"APP_STORAGE"|translate}}</label>
                    </clr-toggle-wrapper>
                </clr-toggle-container>
                <clr-select-container *ngIf="item.vars['postgresql.persistence.enabled']">
                    <label>{{"APP_STORAGE_CLASS"|translate}}</label>
                    <select clrSelect name="sc"
                            [(ngModel)]="item.vars['global.storageClass']"
                            required>
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let sc of storageClazz" [value]="sc.metadata.name">{{sc.metadata.name}}</option>
                    </select>
                </clr-select-container>
                <clr-input-container *ngIf="item.vars['postgresql.persistence.enabled']">
                    <label>{{"APP_SIZE"|translate}}(Gi)</label>
                    <input clrInput name="size"
                           [(ngModel)]="item.vars['postgresql.persistence.size']" type="number" size="34"/>
                </clr-input-container>
                <clr-select-container *ngIf="item.vars['postgresql.persistence.enabled']">
                    <label>{{"APP_NODE"|translate}}</label>
                    <select clrSelect class="clr-select" name="masternode" [(ngModel)]="item.vars['nodeSelector']">
                        <option value="">{{"APP_DEFAULT_OPTION"|translate}}</option>
                        <option *ngFor="let item of nodeList" [value]="item">{{item}}</option>
                    </select>
                    <clr-control-helper>{{"APP_FILL_RULE"|translate}}</clr-control-helper>
                </clr-select-container>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" [disabled]="buttonLoading"
                (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
        <button type="button" class="btn btn-primary" (click)="onSubmit()" [clrLoading]="buttonLoading"
                [disabled]="itemForm.invalid">{{'APP_COMMIT'|translate}}</button>
    </div>
</clr-modal>

<clr-modal [(clrModalOpen)]="condition" [clrModalClosable]="false">
    <h3 class="modal-title">{{'APP_TIPS'|translate}}</h3>
    <div class="modal-body modal-height">
        {{item.conditions}}
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-outline" (click)="onCancel()">{{'APP_CANCEL'|translate}}</button>
    </div>
</clr-modal>
